<template>
  <div class="intelligent-quality-check-reasult">
    <el-tabs v-model="activeName" :active-name="activeName" @tab-click="tabChange">
      <el-tab-pane :label="item.label"  :name="item.name" v-for="(item, index) in activeTabData" :key="index">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
  </div>
</template>
<script>
  import QualityCheckResultAll from './QualityCheckResult/QualityCheckResultAll.vue'
  import QualityCheckResultAppeal from './QualityCheckResult/QualityCheckResultAppeal.vue'
  export default {
    name: 'qualityCheck',
    data () {
      return {
        activeName: 'QualityCheckResultAll',
        activeTabData: [{label: this.$t('public.all'), name: 'QualityCheckResultAll'}, {label: this.$t('intelligentQualityCheck.resultAppeal'), name: 'QualityCheckResultAppeal'}] // tab切换数据
      }
    },
    computed: {
    },
    components: {
      QualityCheckResultAll,
      QualityCheckResultAppeal
    },
    methods: {
      tabChange (tab) {
        this.activeName = tab.name
      }
    },
    beforeMount () {
      let pathArr = this.$route.fullPath.split('/')
      if (pathArr.length === 4) {
        this.activeName = this.activeTabData[0].name
      } else {
        this.activeName = pathArr[4]
      }
    },
    activated () {
      if (this.$route.path.split('/').length === 4) {
        this.activeName = this.activeTabData[0].name
      }
    }
  }
</script>
<style lang="stylus">
  @import "../../../assets/common.styl"
  .intelligent-quality-check-reasult
    .el-tabs__nav-scroll
      padding 10px
      background-color #fff;
      border-bottom 1px solid #e0e0e0;
    .el-tabs__header .el-tabs__item
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
      border-bottom: none;
      font-size 12px;
    .el-tabs__header .is-active
      background: #459ae9;
      color: #fff;
      padding: 0 15px !important;
      border-radius: 14px;
    .el-tabs__header .el-tabs__active-bar
      background none;
      width: 120px;
      transform: translateX(96px);
</style>
